<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>组件的嵌套</title>
</head>
<body>

<div id="app">
    <html-a></html-a>
    <html-b></html-b>
</div>


<script src="../js/vue.js"></script>
<script>
    //去掉警告
    Vue.config.productionTip = false;

    //独立子组件
    const childComponent = {
        data() {
            return {
                message : '---独立子组件'
            }
        },
        template : `
              <div>{{message}}</div>
        `,
    };

    //1号父组件
    Vue.component('html-a', {
        data() {
            return {
                message : '1号父组件'
            }
        },
        template : `
            <div>
                <div>{{message}}</div>
                <html-a-child></html-a-child>
                <html-child></html-child>
            </div>
        `,
        components : {
            'html-a-child' : {
                data() {
                    return {
                        message : '---1号子组件'
                    }
                },
                template : `
                    <div>{{message}}</div>
                `,
            },
            'html-child' : childComponent
        }
    });


    //2号父组件
    Vue.component('html-b', {
        data() {
            return {
                message : '2号父组件'
            }
        },
        template : `
            <div>{{message}}</div>
        `
    });

    //数据对象
    const dataObj = {
        message : '',
    };

    //创建一个Vue对象
    const app = new Vue({
        el : '#app',
        data : dataObj,

        //计算属性，固定名称
        computed : {

        },

        //方法
        methods : {

        }
    });










</script>
</body>
</html>
